<template>
  <div class="desc-wp">
    <p class="desc">
      {{ question.QuestionTypeDesc }}
    </p>
    <!-- eslint-disable vue/eqeqeq -->
    <van-button
      v-show="question.QuestionId === 0 && $route.query.showAnswer != 1"
      size="large"
      type="primary"
      @click="startTest"
    >
      开始做题
    </van-button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    question: {
      default: () => ({}),
      type: Object,
    },
  },
  methods: {
    startTest () {
      this.$emit('nextSwiper')
    },
  },
})
</script>

<style lang="scss" scoped>
$wrapperHeight: 100vh;
// $footerHeight: 114px;
.desc-wp {
  height: calc(#{$wrapperHeight} - #{$examHeaderInH5});
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /deep/ {
    .has-header & {
      height: calc(#{$wrapperHeight} - #{$examHeaderInH5 + $navBarHeight});
    }
  }
}
.desc {
  padding: 40px 30px;
  line-height: 2;
  font-size: 30px;
}
</style>
